<template>
  <a-modal
    title="工单明细信息列表"
    :visible="show"
    @cancel="handleCancel"
    width="70%"
    class="procedure-modal"
  >
    <template slot="footer">
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleOk"
      >
        返回
      </a-button>
    </template>
    <a-table
      :columns="workUnitColums"
      :row-key="(record) => record.id"
      :data-source="procedureData"
      :scroll="{ y: 350 }"
      size="middle"
    >
    </a-table>
  </a-modal>
</template>

<script>
const workUnitColums = [
  {
    title: "配方明细序号",
    dataIndex: "OrderDetailNo",
    align: "center",
    sorter: true,
  },
  {
    title: "物料编码",
    dataIndex: "MaterialCode",
    align: "center",
  },
  {
    title: "物料名称",
    dataIndex: "MaterialName",
    align: "center",
    ellipsis: true,
    width: 200,
  },
  {
    title: "需求数量",
    dataIndex: "ReqQty",
    align: "center",
  },
  {
    title: "计量单位",
    dataIndex: "ComUnitName",
    align: "center",
  },
  {
    title: "创建人",
    dataIndex: "CreateUser",
    align: "center",
  },
  {
    title: "创建时间",
    dataIndex: "CreateDate",
    align: "center",
  },
];
export default {
  props: { show: Boolean, procedureData: Array },
  data() {
    return {
      workUnitColums,
      loading: false,
      confirmLoading: false,
    };
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.$emit("update:show", false);
    },
    //确认添加/修改
    handleOk() {
      this.$emit("update:show", false);
    },
    //表格选择
    handleTableChange() {},
  },
};
</script>

<style lang="less" scoped>
.procedure-modal {
  .title {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
  }
  .production-reporting {
    border-bottom: 1px solid #eeeeee;
    padding: 0.625rem 0;
    margin-bottom: 0.625rem;
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  .table-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .left {
      flex: 1;
    }
    .right {
      flex: 1;
    }
    .center {
      display: flex;
      flex-direction: column;
      margin: 0 1.25rem;
    }
    .search {
      margin: 0.625rem 0;
    }
    .name {
      font-size: 1.125rem;
      font-weight: bold;
    }
  }
  /deep/.ant-table-body {
    &::-webkit-scrollbar {
      margin: 0.2rem;
      //整体样式
      height: 0.4125rem;
      width: 0.3rem;
    }

    &::-webkit-scrollbar-thumb {
      //滑动滑块条样式
      border-radius: 0.625rem;
      -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2);
      background: #009a9a;
      // background: rgba(2, 35, 60, 1);
    }

    &::-webkit-scrollbar-track {
      //轨道的样式
      -webkit-box-shadow: 0;
      border-radius: 0.625rem;
      background: #ccc;
    }

    &::-webkit-scrollbar-corner {
      background: red;
    }
  }
}
</style>
